<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Deliver-Blog</title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link rel="shortcut icon" href="img/Logo-i.png" />
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link href="vendor/bootstrap-3.3.0/css/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" href="vendor/lanrenzhijia.css" type="text/css" />
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="vendor/animate.css" />
		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<link rel="stylesheet" href="vendor/fakeLoader.css" />
		<link rel="stylesheet" href="vendor/animsition.min.css" />
		<script src="vendor/fakeLoader.min.js"></script>
		<link rel="stylesheet" type="text/css" href="vendor/video-js.css" />
		<link href="css/core.css" rel="stylesheet" />

		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	
        	<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
        <![endif]-->

		<!--<script type="text/javascript">
			videojs.options.flash.swf = "video-js.swf";
		</script>-->
	</head>

	<body class="animsition">
		<!--IE9一下浏览器提示-->
		<!--[if lt IE 9]>
			<div class="Del-warning" id="DelWarning">
				<div class="warning-center">
					<span class="tips">为了您更好的体验，请使用IE 9及以上的浏览器！</span>
					<span class="close" id='close'><i class="fa fa-times"></i></span>
					
				</div>
			</div>
		<![endif]-->

		<!--公共header-->
		<div class="fakeloader" style="background-color: #a3a5f4;"></div>
		<script type="text/javascript">
			$(".fakeloader").fakeLoader({
					timeToHide: 500, //Time in milliseconds for fakeLoader disappear
					zIndex: 99999, // Default zIndex
					spinner: "spinner2", //Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 
					//Hex, RGB or RGBA colors
					//				imagePath: "yourPath/customizedImage.gif" //If you want can you insert your custom image
				});

		</script>
		<header class="Del-common-header">
			<div class="content">
				<div class="common-header-top">
					<div class="top-logo-img">
						<img src="img/logo1.png" />
					</div>
					<ul class="top-list clearfix">
						<li class="list-item list-rss">
							<a href=""><i class="fa fa-rss"></i></a>
						</li>
						<li class="list-item list-f">
							<a href=""><i class="fa fa-facebook-f"></i></a>
						</li>
						<li class="list-item list-twitter">
							<a href=""><i class="fa fa-twitter"></i></a>
						</li>
					</ul>
				</div>
				<div class="common-header-nav wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
					<ul id="nav-menu" class="nav-menu clearfix">
						<li class="nav-toggle">
							<div id="toggle-icon" class="toggle-icon">
								<i class="fa fa-bars"></i>
								<i class="fa fa-times" style="display: none;"></i>
							</div>
						</li>
						<li class="signin-toggle">
							<a data-sign="0" id="signin-icon" class="user-signin"><i class="fa fa-user"></i></a>
						</li>
						<li class="home-logo">
							<a href="index-Home.html"><span class="text-replace">DELIVER</span></a>
						</li>
					</ul>
					<ul class="nav-list clearfix">
						<li class="list-item">
							<a href="index-Home.html" class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="100">HOME</a>
						</li>
						<li class="list-item">
							<a href="portfolio.html" class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="100">PORTFOLIO</a>
						</li>
						<li class="list-item">
							<a href="about.html" class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="100">ABOUT</a>
						</li>
						<li class="list-item">
							<a href="services.html" class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="100">SERVICES</a>
						</li>
						<li class="list-item">
							<a href="archive.html" class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="100">ARCHIVE</a>
						</li>
						<li class="list-item">
							<a href="index-blog.html" class="nav-active">BLOG</a>
						</li>
						<li class="list-item">
							<a href="other-pages.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="100">OTHER&nbsp;PAGES</a>
						</li>
						<li class="list-item">
							<a href="contact-us.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="100">CONTACT&nbsp;US</a>
						</li>
						<li class="list-item header-search">
							<form method="get" target="_blank" id="searchform" name="searchform" action="http://www.baidu.com/s">
								<div class="search-input-wrapper">
									<span class="search-icon"><i class="fa fa-search"></i></span>
									<input type="hidden" name="genre" value="">
									<input type="search" class="search-input" id="search-input" name="word" value="" placeholder="输入关键词搜索..." autocomplete="off">
									<button type="submit" class="search-submit" id="search-submit"></button>
								</div>
							</form>
						</li>
					</ul>
				</div>
			</div>
			<div class="common-header-footer">
				<div class="header-footer-text">
					<p class="text">OUR&nbsp;BLOG</p>
				</div>
			</div>
		</header>

		<section class="Del-blog-index-container">
			<div class="index-blog-content clearfix">
				<div class="index-blog-left clearfix wow slideInLeft animated" data-wow-duration="0.5s" data-wow-delay="0.5s">
					<ul class="index-blog-left-list">
						<li class="index-blog-left-item">
							<div class="blog-show-photo-box" id="index-blog-photo-container">

								<a href="#"><img class="pho" width="750" height="400" alt="focus" title="焦点图1" src="img/ar-focus1.jpg" /></a>
								<a href="#"><img class="pho" width="750" height="400" alt="focus" title="焦点图2" src="img/ar-focus2.jpg" /></a>
								<a href="#"><img class="pho" width="750" height="400" alt="focus" title="焦点图3" src="img/ar-focus3.jpg" /></a>
								<a href="#"><img class="pho" width="750" height="400" alt="focus" title="焦点图3" src="img/focus4.jpg" /></a>
								<ul class="btn-change">
									<li class="bc active"></li>
									<li class="bc"></li>
									<li class="bc"></li>
									<li class="bc"></li>
								</ul>
							</div>
							<aside class="blog-show-photo-tools">
								<ul class="clearfix">
									<h3>7 STRATEGIES TO MARKET YOUR BUSINESS ONLINE</h3>
									<li>
										<a href=""><i class="fa fa-calendar"></i>JULY 3, 2013</a>
									</li>
									<li>
										<a href=""><i class="fa fa-user"></i>MICHAEL REIMER</a>
									</li>
									<li>
										<a href=""><i class="fa fa-bookmark"></i>MARKETING, NEWS</a>
									</li>
									<li>
										<a href="bolg.html"><i class="fa fa-commenting"></i>2 COMMENTS</a>
									</li>
								</ul>
								<span class="blog-show-photo-describe">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. 
									Nullam eleifend congue turpis, vel scelerisque m
									assa fermentum ac ... 
								</span>
							</aside>
						</li>
						<li class="index-blog-left-item wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="" data-wow-offset="-10">
							<div class="blog-show-photo-box" id="cloon">

								<img width="750" height="400" alt="focus" title="焦点图2" src="img/ar-focus2.jpg" />

							</div>
							<aside class="blog-show-photo-tools">
								<ul class="clearfix">
									<h3>BASIC POST WITH FEATURED IMAGE</h3>
									<li>
										<a href=""><i class="fa fa-calendar"></i>JULY 2, 2013</a>
									</li>
									<li>
										<a href=""><i class="fa fa-user"></i>MICHAEL REIMER</a>
									</li>
									<li>
										<a href=""><i class="fa fa-bookmark"></i>WEBSITE RELEASES</a>
									</li>
									<li>
										<a href="bolg.html"><i class="fa fa-commenting"></i>2 COMMENTS</a>
									</li>
								</ul>
								<span class="blog-show-photo-describe">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. 
									Nullam eleifend congue turpis, vel scelerisque m
									assa fermentum ac ... 
								</span>
							</aside>
						</li>
						<li class="index-blog-left-item wow fadeInLeft animated" data-wow-duration="1s" data-wow-delay="" data-wow-offset="-10">

							<aside class="blog-show-photo-tools">
								<ul class="clearfix">
									<h3>POST EXAMPLE WITH NO FEATURED IMAGE</h3>
									<li>
										<a href=""><i class="fa fa-calendar"></i>JULY 3, 2013</a>
									</li>
									<li>
										<a href=""><i class="fa fa-user"></i>MICHAEL REIMER</a>
									</li>
									<li>
										<a href=""><i class="fa fa-bookmark"></i>MARKETING, NEWS</a>
									</li>
									<li>
										<a href=""><i class="fa fa-commenting"></i>2 COMMENTS</a>
									</li>
								</ul>
								<span class="blog-show-photo-describe">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. 
									Nullam eleifend congue turpis, vel scelerisque m
									assa fermentum ac ... 
								</span>
							</aside>
						</li>
						<li class="index-blog-left-item ">
							<div class="blog-show-photo-box index-blog-video-container " id="vv">
								<video id="example_video1" class="video-js vjs-default-skin" controls="controls" preload="none" width="100%" height="400" poster="img/ar-focus3.jpg" data-setup="{}" style="position: relative;">
									<source src="videos/oceans.mp4" type='video/mp4' />
									<source src="videos/oceans2.webm" type="video/webm"></source>
									<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>
									<!-- Tracks need an ending tag thanks to IE9 -->
									<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
									<!-- Tracks need an ending tag thanks to IE9 -->
								</video>
								<div class="index-blog-video-tip">
									<div class="ib-video-tip-left">
										<a href="#"><img src="img/index-blog-news.jpg" /></a>
									</div>
									<div class="ib-video-tip-right clearfix">
										<h4><a href="#">Home Tracker Software</a></h4>
										<aside class="ib-video-tip-describe"><span>from<a href="#">Your Channel</a></span></aside>
									</div>
								</div>
								<ul class="index-blog-link">
									<li>
										<a href="#"><i class="fa fa-heart"></i><span>lINK</span></a>
									</li>
									<li>
										<a href="#"><i class="fa fa-share-alt-square"></i><span>SHARE</span></a>
									</li>
									<li>
										<a href="#"><i class="fa fa-code"></i><span>EMBED</span></a>
									</li>
								</ul>
							</div>
							<aside class="blog-show-photo-tools">
								<ul class="clearfix">
									<h3>WIDEO POST EXAMPLE</h3>
									<li>
										<a href=""><i class="fa fa-calendar"></i>JULY 3, 2013</a>
									</li>
									<li>
										<a href=""><i class="fa fa-user"></i>MICHAEL REIMER</a>
									</li>
									<li>
										<a href=""><i class="fa fa-bookmark"></i>MARKETING, NEWS</a>
									</li>
									<li>
										<a href=""><i class="fa fa-commenting"></i>2 COMMENTS</a>
									</li>
								</ul>
								<span class="blog-show-photo-describe">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. 
									Nullam eleifend congue turpis, vel scelerisque m
									assa fermentum ac ... 
								</span>
							</aside>
						</li>
						<li class="index-blog-left-item wow fadeInLeft animated" data-wow-duration="1s" data-wow-delay="" data-wow-offset="-10">
							<div class="blog-show-photo-box index-blog-au-container">
								<div class="music-player">
									<div class="info">

										<div class="center">
											<div class="jp-playlist">
												<ul>
													<li></li>
												</ul>
											</div>
										</div>

										<div class="gundong-content wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.8s" data-wow-offset="-10">
											<div class="progress jp-seek-bar"> <span class="jp-play-bar" style="width: 0%"></span> </div>
										</div>
										<div class="controls">
											<!--<div class="current jp-current-time">00:00</div>-->
											<div class="play-controls">
												<a href="javascript:;" class="icon-previous jp-previous fa fa-step-backward" title="previous"></a>
												<a href="javascript:;" class="icon-play jp-play fa fa-play" title="play"></a>
												<a href="javascript:;" class="icon-pause jp-pause fa fa-pause" title="pause"></a>
												<a href="javascript:;" class="icon-next jp-next fa fa-step-forward" title="next"></a>
											</div>
											<div class="volume-level jp-volume-bar">
												<span class="jp-volume-bar-value" style="width: 0%"></span>
												<!--<a href="javascript:;" class="icon-volume-up jp-volume-max" title="max volume"></a>-->
												<a href="javascript:;" class="icon-volume-down jp-mute fa fa-volume-up" title="mute"></a>
											</div>
										</div>
										<div id="jquery_jplayer" class="jp-jplayer" style="width: 200px; height: 30px;"></div>
									</div>

								</div>
							</div>
							<aside class="blog-show-photo-tools">
								<ul class="clearfix">
									<h3>WIDEO POST EXAMPLE</h3>
									<li>
										<a href=""><i class="fa fa-calendar"></i>JULY 3, 2013</a>
									</li>
									<li>
										<a href=""><i class="fa fa-user"></i>MICHAEL REIMER</a>
									</li>
									<li>
										<a href=""><i class="fa fa-bookmark"></i>MARKETING, NEWS</a>
									</li>
									<li>
										<a href=""><i class="fa fa-commenting"></i>2 COMMENTS</a>
									</li>
								</ul>
								<span class="blog-show-photo-describe">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. 
									Nullam eleifend congue turpis, vel scelerisque m
									assa fermentum ac ... 
								</span>
							</aside>
						</li>
					</ul>
					<ul class="blog-page">
						<li>
							<a href="" class="active">1</a>
						</li>
						<li>
							<a href="">2</a>
						</li>
						<li>
							<a href="">3</a>
						</li>
						<li>
							<a href="">4</a>
						</li>
						<li>
							<a href="">5</a>
						</li>
					</ul>
				</div>

				<div class="container-content-right clearfix wow slideInRight animated" data-wow-duration="1s" data-wow-delay="0.4s">
					<div class="contact">
						<h4>POPULAR POSTS</h4>
						<ul>
							<li>
								<a href="#">New Premium WordPress Theme - Blaco</a>
							</li>
							<li>
								<a href="#">Top Web Trends of 2013</a>
							</li>
							<li>
								<a href="#">Video Post Example</a>
							</li>
							<li>
								<a href="#">How Important is Twitter</a>
							</li>
							<li class="active">
								<a href="#">Home Builders New Planning Solution</a>
							</li>
						</ul>
					</div>
					<div class="contact">
						<h4>BLOG CATEGORIES</h4>
						<p>
							<a href="#">
								News (
								<span>4</span> )
							</a>
						</p>
						<p>
							<a href="#">
								Website Releases (
								<span>23</span> )
							</a>
						</p>
						<p>
							<a href="#">
								Events (
								<span>7</span> )
							</a>
						</p>
						<p>
							<a href="#">
								Marketing (
								<span>5</span> )
							</a>
						</p>
						<p>
							<a href="#">
								Web Development (
								<span>2</span> )
							</a>
						</p>
					</div>
					<div class="contact last">
						<h4>ARCHIVES</h4>
						<p>
							<a href="#">
								March (
								<span>4</span> )
							</a>
						</p>
						<p>
							<a href="#">
								April (
								<span>23</span> )
							</a>
						</p>
						<p>
							<a href="#">
								May (
								<span>7</span> )
							</a>
						</p>
						<p>
							<a href="#">
								June (
								<span>5</span> )
							</a>
						</p>
						<p>
							<a href="#">
								July (
								<span>2</span> )
							</a>
						</p>
					</div>
				</div>
			</div>
		</section>

		<div class="fixbox">
			<div class="retop" id="reTop" title="回到顶部">
				<a><i class="fa fa-arrow-circle-up"></i></a>
			</div>
			<div class="rehome" title="回到首页">
				<a href="index-Home.html"><i class="fa fa-bookmark-o"></i></a>
			</div>
		</div>

		<!--公共footer-->
		<footer class="Del-common-footer">
			<section class="footer-section wow fadeInUp animated " data-wow-duration="0.5s" data-wow-delay="0.2s">
				<div class="section-list clearfix">
					<aside class="item-group item-group-left">
						<div class="group-box">
							<div class="top-logo-img">
								<img src="img/logo2.png" />
							</div>
							<ul class="top-list clearfix">
								<li class="list-item list-rss">
									<a href=""><i class="fa fa-rss"></i></a>
								</li>
								<li class="list-item list-f">
									<a href=""><i class="fa fa-facebook-f"></i></a>
								</li>
								<li class="list-item list-twitter">
									<a href=""><i class="fa fa-twitter"></i></a>
								</li>
							</ul>
						</div>
						<p class="span-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida quam quis nunc rutrum placerat. Proin eu mi vitae neque veh interdum id nec turpis nam auctor faucibus sollicitudin.</p>
					</aside>
					<aside class="item-group item-group-center mg-l1">
						<dl>
							<dt>CONTACT INFO</dt>
							<dd>
								<a href="#">222 Ave C South</a>
							</dd>
							<dd>
								<a href="#">Saskatoon, Saskatchewan</a>
							</dd>
							<dd>
								<a href="#">Canada S7K 2N5</a>
							</dd>
							<dd class="Email">
								<a href="#">info@deliver.ca</a>
							</dd>
							<dd class="id-num">
								<a href="#">1.306.222.3456</a>
							</dd>
						</dl>
					</aside>
					<aside class="item-group item-group-center mg-l2">
						<dl class="center-dl-r">
							<dt>QUICK LINKS</dt>
							<dd>
								<a href="portfolio.html"><i class="fa fa-chevron-right"></i>Portfolio</a>
							</dd>
							<dd>
								<a href="about.html"><i class="fa fa-chevron-right"></i>About</a>
							</dd>
							<dd>
								<a href="archive.html"><i class="fa fa-chevron-right"></i>Archive</a>
							</dd>
							<dd>
								<a href="index-blog.html"><i class="fa fa-chevron-right"></i>Blog</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Bropdown</a>
							</dd>
							<dd>
								<a href="contact-us.html"><i class="fa fa-chevron-right"></i>Contact Us</a>
							</dd>
						</dl>
					</aside>
					<aside class="item-group item-group-right">
						<dl>
							<dt>NEWSLETTER</dt>
							<dd><span>Lorem ipsum dolor sit amet dolor consectetur adipiscing elit. </span></dd>
							<dd><input class="Email" type="text" value="Email" />
								<a href="#"><input class="button" type="button" value="OK" /></a>
							</dd>
						</dl>
					</aside>
				</div>
				<div class="section-bottom clearfix">
					<p class="p-left">COPYRIGHT 2013 <span>DELIVER</span>. ALL RIGHTS RESERVED.</p>
					<p class="p-right">ABOUT / PRIVACY POLICY / CONTACT</p>
				</div>
			</section>
		</footer>
		
		
		<!--<script src="vendor/jquery.js"></script>-->
		<script src="vendor/video.js"></script>
		<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
		<script src='vendor/jplayer.playlist.min.js'></script>
		<script src='vendor/jquery.jplayer.min.js'></script>
		<!--<script src="vendor/jquery.fitvids.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/core.js"></script>
		<script src="vendor/lanrenzhijia.js"></script>
		<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
		
		<script src="vendor/jquery.animsition.min.js"></script>
		<script type="text/javascript">
			$(function() {
				indexblog.focus();
				common.search();
				common.close();
				common.bar();
				Services.topp();
				
				$(".animsition").animsition({

					inClass: 'fade-in',
					outClass: 'fade-out',
					inDuration: 500,
					outDuration: 500,
					linkElement: '.animsition-link',
					// e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
					loading: true,
					loadingParentElement: 'body', //animsition wrapper element
					loadingClass: 'animsition-loading',
					unSupportCss: ['animation-duration',
						'-webkit-animation-duration',
						'-o-animation-duration'
					],
					//"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
					//The default setting is to disable the "animsition" in a browser that does not support "animation-duration".

					overlay: false,

					overlayClass: 'animsition-overlay-slide',
					overlayParentElement: 'body'
				});
				var wow = new WOW({
					boxClass: 'wow',
					animateClass: 'animated',
					offset: 0,
					mobile: true,
					live: true
				});

				if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
					new WOW().init();
				}
			})
		</script>

	</body>

</html>